<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>tab-选项卡效果</title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
				list-style: none;
			}
			
			h2 {
				margin-bottom: 20px;
				background: #ccc;
				display: inline-block;
			}
			
			h2 span {
				background: blue;
				display: inline-block;
				width: 80px;
				height: 40px;
				text-align: center;
				cursor: pointer;
			}
			
			div {
				width: 600px;
				height: 200px;
				border: 2px solid blue;
				overflow: hidden;
				position: relative;
			}
			
			ul {
				width: 600px;
				position: absolute;
				left: 0px;
				transition: 0.2s linear;
			}
			
			ul li {
				width: 200px;
				height: 200px;
				background: #eee;
				float: left;
			}
			
			ul li:nth-child(even) {
				background-color: green;
			}
			
			ul.sh {
				display: block;
			}
			
			ul.hd {
				display: none;
			}
			
			span.disable {
				background: #ccc;
				color: #eee;
				cursor: default;
			}
		</style>
	</head>

	<body>

		<section id="s1">

			<h2><span>家电</span> | <span class="disable">手机</span> | <span class="disable">笔记本</span>| <span class="disable">西瓜</span> </h2>
			<div>

				<ul class="sh">
					<li>家电</li>
					<li>BB</li>
					<li>CC</li>

				</ul>
				<ul class="hd">
					<li>手机</li>
					<li>EE</li>
					<li>FF</li>
				</ul>
				<ul class="hd">
					<li>笔记本</li>
					<li>EE</li>
					<li>FF</li>
				</ul>
				<ul class="hd">
					<li>西瓜西瓜</li>
					<li>EE</li>
					<li>FF</li>
				</ul>
			</div>

		</section>
		<hr />

		<section id="s2">

			<h2><span>奶粉</span> | <span class="disable">奶油</span> | <span class="disable">奶酪</span> </h2>
			<div>

				<ul class="sh">
					<li>奶粉</li>
					<li>BB</li>
					<li>CC</li>

				</ul>
				<ul class="hd">
					<li>奶油</li>
					<li>EE</li>
					<li>FF</li>
				</ul>
				<ul class="hd">
					<li>奶酪</li>
					<li>EE</li>
					<li>FF</li>
				</ul>
			</div>

		</section>

		<section id="s3">

			<h2><span>箱包</span> | <span class="disable">香水</span> | <span class="disable">香料</span> </h2>
			<div>

				<ul class="sh">
					<li>箱包</li>
					<li>BB</li>
					<li>CC</li>

				</ul>
				<ul class="hd">
					<li>香水</li>
					<li>EE</li>
					<li>FF</li>
				</ul>
				<ul class="hd">
					<li>香料</li>
					<li>EE</li>
					<li>FF</li>
				</ul>
			</div>

		</section>
		<script>
			function SN(_id) {
				var btn = document.querySelectorAll(_id + " span");
				var uls = document.querySelectorAll(_id + " ul");

				for(var i = 0; i < btn.length; i++) {
					btn[i].index = i;
					btn[i].onmouseover = function() {
						ini()
						//让当前选项卡亮色
						this.className = ""
						uls[this.index].className = "sh";
					}
				}

				function ini() {
					for(var i = 0; i < btn.length; i++) {
						btn[i].className = "disable"
						uls[i].className = "hd";
					}
				}
			}

			SN("#s1");
			SN("#s2");
			SN("#s3");
		</script>
	</body>

</html>